<template>
  <van-cell>
    <van-image
      slot="icon"
      class="authorPhoto"
      round
      fit="cover"
      :src="comments.aut_photo"
    />
    <div slot="title">
      <div class="nameOrBtnBox">
        <div class="authorName">{{ comments.aut_name }}</div>
        <div
          :class="{likeIconColor: comments.is_liking}"
          @click="onLiking"
        >
          <van-icon
            class="goodBtn"
            :name="comments.is_liking ? 'good-job' : 'good-job-o'"
          />
          <span class="goodNum">{{ comments.like_count }}</span>
        </div>
      </div>
      <div class="comment">{{ comments.content }}</div>
      <div class="dateAndBtnBox">
        <span class="date">{{ comments.pubdate | dateTime('YYYY年MM月DD日 HH:ss') }}&nbsp;&nbsp;&nbsp;·</span>
        <span>
          <van-button
            round
            class="commentBtn"
            @click="$emit('update-reply', comments)"
          >{{ comments.reply_count }} 回复</van-button>
        </span>
      </div>
    </div>
  </van-cell>
</template>

<script>
import { getCommentsLiking, deleteCommentsLiking } from '@/api/comments'

export default {
  name: 'commentItem',
  components: {},
  props: {
    comments: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 点赞或取消点赞
    async onLiking () {
      const commentsId = this.comments.com_id.toString()
      if (this.comments.is_liking) {
        await deleteCommentsLiking(commentsId)
        this.comments.like_count--
      } else {
        await getCommentsLiking(commentsId)
        this.comments.like_count++
      }
      this.comments.is_liking = !this.comments.is_liking
    }
  }
}
</script>
<style lang='less' scoped>
.authorPhoto {
  height: 35px;
  width: 35px;
  margin-right: 10px;
}
.nameOrBtnBox {
  display: flex;
  justify-content: space-between;
}
.authorName {
  color: #4683d3;
}
.comment {
  font-size: 18px;
  margin: 10px 0px;
}
.dateAndBtnBox {
  display: flex;
  justify-items: center;
}
.date {
  font-size: 13px;
  line-height: 30px;
  margin-right: 10px;
}
.commentBtn {
  width: 70px;
  height: 23px;
  background-color: #f3f3f3;
  border: unset;
  font-size: 13px;
}
.likeIconColor {
  color: #71AFFF;
}
.goodBtn {
  font-size: 20px;
}
.goodNum {
  font-size: 15px;
}
</style>
